<template>
	<view>
		<u-popup :show="showPop" mode="bottom" @close="popClose">
			<view class="wrapper">
				<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList" :key="index"
						:label="item.name" :name="item.value">
					</u-checkbox>
				</u-checkbox-group>
				<u-button type="primary" class='m-t-20' @click="btnSure">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			showFileds: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				showPop: false,
				checkboxValue: [],
				checkboxList: [{
						value: "spec",
						name: '规格',
					},
					{
						value: "vatNo",
						name: '缸号',
					},
					{
						value: "itemNo",
						name: '款号',
					},
					{
						value: "remarks",
						name: '备注',
					}
				]
			}
		},
		watch: {
			'showFileds': {
				handler(data) {
					this.checkboxValue = data
				},
				immediate: true
			}
		},
		methods: {
			open() {
				this.showPop = true
			},
			btnSure() {
				this.showPop = false
				this.$emit("on-sure", this.checkboxValue || [])
			},
			popClose() {
				this.showPop = false
			},
			checkboxChange(val) {
				console.log(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 30rpx;
	}
</style>
